{% extends 'demo_base.html' %}

{% block title %}MySQL 表格演示{% endblock %}

{% block nav %}
    <a href="/mysql_demo/">首页</a>
    <br>
    <a href="/mysql_demo/basic_introduction/">介绍</a>
    <br>
    <a class="selected" href="/mysql_demo/table_demo/">演示</a>
{% endblock %}

{% block content %}
    
    <h3>MySQL 表格演示</h3>

    <p class="demo_para">请输入对应字段：</p>
    <form action="table_demo_forms/" method="post">
        {% csrf_token %}
        <div class="input-group" id="input">
            <p><label for="integer">整型字段：</label>><input type="text" id="integer" placeholder="IntegerField" name="integer"></p>
            <p><label for="boolean">布尔值字段：</label>><input type="text" id="boolean" placeholder="BooleanField" name="boolean"></p>
            <p><label for="date">日期字段：</label>><input type="text" id="date" placeholder="DateField" name="date"></p>
            <p><label for="char">字符串字段：</label>><input type="text" id="char" placeholder="CharField" name="char"></p>
            <p><label for="text">文本字段：</label>><input type="text" id="text" placeholder="TextField" name="text"></p>
        </div>
        <div>
            <button type="submit" class="btn btn-default">添加</button>
        </div>
    </form>
    <br>
    <table class="table table-bordered" id="table">
        <thead>
            <tr>
                <th>整型字段 int</th>
                <th>布尔值字段 boolean</th>
                <th>日期字段 date</th>
                <th>字符串字段 varchar</th>
                <th>文本字段 text</th>
            </tr>
        </thead>
        <tbody>
        {% for demo_item in demo_items %}
            <tr>
                <td>{{ demo_item.integer }}</td>
                <td>{{ demo_item.boolean }}</td>
                <td>{{ demo_item.date }}</td>
                <td>{{ demo_item.char }}</td>
                <td>{{ demo_item.text }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    
    <a href="/mysql_demo/student_demo/">下一篇：MySQL 学生信息管理系统演示 &gt;&gt;</a>
    
{% endblock %}